<%@ taglib prefix="s" uri="/struts-tags"%>
<%@page contentType="text/html;charset=UTF-8"%>

	<script type="text/javascript">
		// URL to call ajax
		var LIST_PERMISSION_URL   = "<s:url value='/securityList/accessRightAjax_SearchPermission'/>";
		var ADD_PERMISSION_URL    = "<s:url value='/securityList/accessRightAjax_AddPermission'/>";
		var UPDATE_PERMISSION_URL = "<s:url value='/securityList/accessRightAjax_UpdatePermission'/>";
		var REMOVE_PERMISSION_URL = "<s:url value='/securityList/accessRightAjax_DeletePermission'/>";
		var LIST_REMAIN_MODULE_URL  = "<s:url value='/securityList/accessRightAjax_SearchRemainModule'/>";

		var url;
		function newPermission(){
			var parent = $('#selectedGroupCode').val();
			if (parent == '') {
				$.messager.alert('Info', 'Please select the group');
			} else {
				reloadRemainModules();
				$('#dlg').dialog('open').dialog('setTitle','New Permission');
				$('#fm').form('clear');
				url = ADD_PERMISSION_URL;
			}
		}
		function editPermission(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#dlg').dialog('open').dialog('setTitle','Edit Permission');
				$('#fm').form('load',row);
				url = UPDATE_PERMISSION_URL + '?groupCode='+row.groupCode;
				alert(row.id);
			}
		}
		function savePermission(){
			
			// check selected parent or not?
			var group = $('#selectedGroupCode').val();
			if (group == '') {
				$.messager.alert('Info', 'Please select the group');
			} else {
				// set parent for adding
				$("#fm_selectedGroupCode").val(group);
				$('#fm').form('submit',{
					url: url,
					onSubmit: function(){
						var valid = $(this).form('validate'); 
						if (valid) {
							$.messager.progress(); 
						}
						return valid;
					},
					success: function(result){
						$.messager.progress('close');
						var result = eval('('+result+')');
						if (result.successMessage != ''){
							$('#dlg').dialog('close');		// close the dialog
							reloadGrid();	// reload the user data
						} else {
							$.messager.alert('Error', result.failMessage);
						}
					}
				});
			}
		}
		function removePermission(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$.messager.confirm('Confirm','Are you sure you want to remove this permission?',function(r){
					if (r){
						$.post(REMOVE_PERMISSION_URL,
							{
								selectedGroupCode  : row.groupCode,
								selectedModuleCode : row.moduleCode
							},
							function(result){
							if (result.successMessage){
								reloadGrid();	// reload the user data
							} else {
								$.messager.alert('Error', result.failMessage);
							}
						},'json');
					}
				});
			} else {
				$.messager.alert('Info', 'Please select one permission');
			}
		}
		
		function reloadGrid() {
		    $('#dg').datagrid('load',{ 
		    	selectedGroupCode: $('#selectedGroupCode').val()
		    });
		}

		function reloadRemainModules() {
			// update remain module for the selected group
			$.post(LIST_REMAIN_MODULE_URL,{selectedGroupCode:$('#selectedGroupCode').val()},function(result){
				if (result.moduleInfoList != null){
					var data = result.moduleInfoList;
					var sel = $("#fm_selectedModuleCode");
				    sel.empty();
				    sel.append('<option value="" selected>-- select module --</option>');
				    for (var i=0; i<data.length; i++) {
				      sel.append('<option value="' + data[i].moduleCode + '">' + data[i].moduleName + '</option>');
				    }
				}
			},'json');
		}

		$(document).ready(function() {
			$("#search_permission_by_group_code").click(function(){
				reloadGrid();
				reloadRemainModules();
			});
			
			$("#selectedGroupCode").change(function() {
				
			});
		}); 
		
	</script>

<center>
	<h2>Security List - Access Rights</h2>
</center>
<center>
	<table width="90%" cellspacing="1" cellpadding="3" border="0">
		<tr>
			<td align="center" width="30%">
				<label for="selectedGroupCode">Group: </label>
				<s:if test="groupInfoList.{groupName} != null">
					<s:select name="selectedGroupCode" headerKey="" theme="simple"
						id="selectedGroupCode" headerValue="--- Select ---" key="groupCode"
						list="groupInfoList"	listKey="groupCode" listValue="groupName">
					</s:select>
				</s:if>
				<s:else>
					<s:select name="selectedGroupCode" headerKey="" theme="simple"
						id="selectedGroupCode" headerValue="--- Select ---" key="groupCode"
						list="''">
					</s:select>
				</s:else>
			</td>
			<td align="left" width="70%">
				<a href="#" class="easyui-linkbutton" id="search_permission_by_group_code">Search</a>
			</td>
		</tr>
	</table>

	<table id="dg" title="Permission List" class="easyui-datagrid" style="width:850px;height:250px"
			toolbar="#toolbar" fitColumns="true"
			data-options="
				rownumbers:true,  
                singleSelect:true,  
                autoRowHeight:false,  
                singleSelect: true,
				url: LIST_PERMISSION_URL,
				loadFilter: function(data) {
					if (data.permissionInfoList !== null && data.permissionInfoList !== undefined) {
						return {rows: data.permissionInfoList, total: data.permissionInfoList.length}
					} else {
						return {rows: [], total: 0}
					}					
				},
				method: 'post'
			">
		<thead>
			<tr>
				<th data-options="field:'groupCode',width:100,hidden:true"></th>
				<th data-options="field:'moduleCode',width:100">Module Code</th>
				<th data-options="field:'moduleName',width:200">Module Name</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newPermission()">New Permission</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removePermission()">Remove Permission</a>
	</div>
</center>

	<div id="dlg" class="easyui-dialog" style="width:400px;padding:10px 20px"
			closed="true" buttons="#dlg-buttons">
		<div class="ftitle">Permission Information</div>
		<form id="fm" method="post" novalidate>
			<s:hidden name="selectedGroupCode" id="fm_selectedGroupCode"/>
			
			<div class="fitem" style="width: 100%">
				<label style="width: 30%;display: block;" for="fm_selectedModuleCode">Module: </label>

				<select name="selectedModuleCode" id="fm_selectedModuleCode">
					<option value="">--select module--</option>
				</select>

			</div>

		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="savePermission()">Save</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
	</div>
